import "./my-input-number.css"

function MyInputNumber({min=Number.MIN_VALUE, max=Number.MAX_VALUE, value, onChange}) {
    function doChange(newValue) {
        if (min <= newValue && newValue <= max) {
            onChange(newValue)
        }
    }
    return (
        <span className="my-input-number">
            <span className={value - 1 >= min ? "left btn" : "left btn disabled"}
                  onClick={() => doChange(value - 1)}>-</span>
            <input value={value} onChange={(e) => doChange(e.target.value)}/>
            <span className={value + 1 <= max ? "right btn" : "right btn disabled"}
                  onClick={() => doChange(value + 1)}>+</span>
        </span>
    )
}

export default MyInputNumber